<template>
  <div id="banner">
    <div class="wrapper">
      <div class="ta-inner-wrapper">
        <h1>Get away from it all and relax</h1>
        <div class="ta-inner-content-wrapper">
          <p>呼儿将出换美酒</p>
          <p>与尔同销万古愁</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data() {
    return {};
  },
  components: {}
};
</script>

<style scoped lang="stylus">
.wrapper {
  background-image: url('https://themes.woocommerce.com/hotel/wp-content/uploads/sites/93/2016/03/Fotolia_99884121_Subscription_Monthly_M.jpg'); // themes.woocommerce.com/hotel/wp-content/uploads/sites/93/2016/03/Fotolia_99884121_Subscription_Monthly_M.jpg);
  background-color: rgb(255, 255, 255);
  color: rgb(255, 255, 255);
  background-size: cover;
  background-position: 50% -85.6781px;

  .ta-inner-wrapper {
    padding: 12em;

    h1 {
      font-size: 3.2rem;
    }

    .ta-inner-content-wrapper p{
      font-size: 3.2rem;
    }
  }
}
</style>
